<template>
    <picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
        <slot></slot>
    </picker>
</template>

<script>
    let selectVal = ['','','']
    let selectid = ['','','']
    export default {
		props:{
			"id":{
				type:Array,
				default:[0,0,0]
			}
		},
        data() {
            return{
                value: [0,0,0],
                array: [],
                index: 0,
                allAddress: []
            }
        },
		watch:{
			id(newVal,oldVal){
				if(newVal){
					this.callbackDate()
				}
			}
		},
        async created() {
			let {data} = await this.rq.getData('Area/getRegion')
            this.allAddress = data
            this.initSelect()
        },
        methods:{
            // 初始化地址选项
            initSelect() {
                this.updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                //this.$forceUpdate()  // 触发双向绑定
            },
            // 地址控件改变控件
            columnchange(d) {
                this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
                .updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                //this.$forceUpdate()  // 触发双向绑定
            },
            callbackDate(){
				this.array = []
				this.array[0]= this.allAddress.map((obj,index) => {
				    if(obj.id==this.id[0]){
						this.value[0] = index
						selectVal[0] = obj.name
					}
					return {
                        name: obj.name,
						id: obj.id
                    }
				})
				this.array[1] = this.allAddress[this.value[0]].children.map((obj,index) => {
				    if(obj.id==this.id[1]){
				    	this.value[1] = index
						selectVal[1] = obj.name
				    }
					return {
					    name: obj.name,
						id: obj.id
					}
				})
				this.array[2] = this.allAddress[this.value[0]].children[this.value[1]].children.map((obj,index) => {
				    if(obj.id==this.id[2]){
				    	this.value[2] = index
						selectVal[2] = obj.name
				    }
					return {
					    name: obj.name,
						id: obj.id
					}
				})
				this.$emit('change', {
				    index: this.value,
				    data: selectVal,
					id: this.id
				})
			},
            /**
             * 更新源数据
             * */
            updateSourceDate() {
                this.array = []
                this.array[0] = this.allAddress.map(obj => {
                    return {
                        name: obj.name,
						id: obj.id
                    }
                })
                this.array[1] = this.allAddress[this.value[0]].children.map(obj => {
                    return {
                        name: obj.name,
						id: obj.id
                    }
                })
                this.array[2] = this.allAddress[this.value[0]].children[this.value[1]].children.map(obj => { 
                    return {
                        name: obj.name,
						id: obj.id
                    }
                })
                return this
            },
            
            /**
             * 更新索引
             * */
            updateSelectIndex(column, value){
                let arr = JSON.parse(JSON.stringify(this.value)) 
                arr[column] = value
                if(column === 0 ) {
                    arr[1] = 0
                    arr[2] = 0
                }
                if(column === 1 ) {
                    arr[2] = 0
                }
                this.value = arr
                return this
            },
            
            /**
             * 更新结果数据 
             * */
            updateAddressDate() {
                selectVal[0] = this.array[0][this.value[0]].name
                selectVal[1] = this.array[1][this.value[1]].name 
                selectVal[2] = this.array[2][this.value[2]].name 
				
				selectid[0] = this.array[0][this.value[0]].id
				selectid[1] = this.array[1][this.value[1]].id 
				selectid[2] = this.array[2][this.value[2]].id 
                return this
            },
            
            /**
             * 点击确定
             * */
            bindPickerChange(e) {
                this.$emit('change', {
                    index: this.value,
                    data: selectVal,
					id: selectid
                })
                return this
            }
            
        }
    }
</script>

<style>
</style>
